<template>
  <view class="page">
    <view class="main">
      <view v-for="(item, index) in historyScoreList" :key="item.exameName">
        <view class="flex align-center margin-top-sm" @click="toggleScore(item)">
          <view class="flex-1">
            <text class="text-bold text-gray">{{ item.exameName }}</text>
          </view>
          <view>
            <u-icon :name="item.show ? 'arrow-up' : 'arrow-down'" size="32rpx" color="#999"></u-icon>
          </view>
        </view>
        <view class="score-item" v-for="(score, scoreIndex) in item.scores" v-if="item.show" :key="score.subject">
          <view>
            <text class="text-gray">{{ score.subject }}</text>
          </view>
          <view class="flex-1">
            <text class="text-gray padding-left"
              v-if="currentEditIndex !== index || currentEditScoreIndex !== scoreIndex">{{ score.score }}</text>
            <u-input class="text-gray padding-left" v-else v-model="score.score" placeholder="请输入分数"></u-input>
          </view>
          <view>
            <u-icon name="edit-pen" size="28" color="#999" @click="editScore(index, scoreIndex)"
              v-if="currentEditIndex !== index || currentEditScoreIndex !== scoreIndex"></u-icon>
            <view class="flex" style="gap: 20rpx" v-else>
              <u-text type="info" text="取消"></u-text>
              <u-text type="primary" text="确定" @click="saveScore(index, scoreIndex)"></u-text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'

const historyScoreList = ref([
  {
    exameName: '一年级基本考试',
    show: false,
    scores: [
      {
        subject: '数学',
        score: 90
      },
      {
        subject: '语文',
        score: 90
      },
      {
        subject: '英语',
        score: 90
      }
    ]
  }
])

const currentEditIndex = ref(-1)
const currentEditScoreIndex = ref(null)

// 展开/收起分数
const toggleScore = (item) => {
  item.show = !item.show
}

// 编辑分数
const editScore = (index, scoreIndex) => {
  currentEditIndex.value = index
  currentEditScoreIndex.value = scoreIndex
}

// 保存分数
const saveScore = (index, scoreIndex) => {
  currentEditIndex.value = -1
  currentEditScoreIndex.value = null
}
</script>
<style scoped lang="scss">
.score-item {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-top: 20rpx;
  gap: 20rpx;
}
</style>